var KeyValueUtil = function () {
    var oKeyValueUtil = new Object();
    oKeyValueUtil.paramIndex=0;
    oKeyValueUtil.init = function (bindDiv, bindButtonDiv, paramInput) {
        this.bindDiv = bindDiv;
        this.bindButtonDiv = bindButtonDiv;
        this.paramInput = paramInput;
        this.bindButtonClick();
    },
        /**
         * key value 输入框内容转成map转成json然后输入到paramInput输入框
         * **/
    oKeyValueUtil.writeParam = function () {
            var jsonData =this.getDataMapJson();
            oKeyValueUtil.paramInput.val(jsonData);
    },
        /**
         * 点击按钮在绑定的元素下面增加key value输入框
         * **/
    oKeyValueUtil.bindButtonClick = function () {
            this.bindButtonDiv.click(function () {
                var keyIndex =oKeyValueUtil.paramIndex;
                var id = oKeyValueUtil.bindDiv.attr('id');
                var divId =id+keyIndex.toString();
                var name = "key";
                var div = "<div style='float: left;margin-bottom: 5px' index ="+keyIndex+ " id=" +divId + ">";
                var key= "<input type='text' id=inputKey" + keyIndex + " style='border:1px solid #378888;font-size:20px' placeholder='" + name + "' name='keyvalueeditor-key'>&nbsp;&nbsp;"
                var value= "<input type='text' id=inputValue" + keyIndex + " style='border:1px solid #378888;font-size:20px' placeholder='value' name='keyvalueeditor-key-Value'>&nbsp;&nbsp;"
                var d=   "<a type ='button'  onclick='deleteKeyDiv(" +divId + ")'><img src='/images/delete.png'></a>";
                var end="</div>";
                oKeyValueUtil.bindDiv.append(div+key+value+d+end);
                keyIndex += 1;
                oKeyValueUtil.paramIndex=keyIndex;
            })
    },
    oKeyValueUtil.switchParam = function (obj) {
            var val = obj.val();
            if (val == "body") {
                $("#addParamButton").hide();
                $("#paramValueDiv").show();
            } else if (val = "keyValue") {
                $("#paramValueDiv").hide();
            }
            obj.change(function () {
                var val = obj.val();
                if (val == "body") {
                    $("#paramValueDiv").show();
                    $("#addParamButton").hide();
                    $("#paramKeyDiv").hide();
                } else if (val = "keyValue") {
                    $("#paramKeyDiv").show();
                    $("#addParamButton").show();
                    $("#paramValueDiv").hide();
                }
            })
    },
        /**
     * 获取指定元素的内容返回jsonMap
     * **/
        oKeyValueUtil.getDataMapJson=function () {
            var length = oKeyValueUtil.bindDiv.children('div').length;
            if (length == 0) {
                return;
            }
            var childrenDiv = oKeyValueUtil.bindDiv.children('div');
            var map = new Map();
            childrenDiv.each(function () {
                var i =$(this).attr("index");
                var key =$("#inputKey" + i).val();
                var value=$("#inputValue" + i).val();
                if(typeof value == "number"){
                    value=value.toString();
                }
                if(key !="" && value!=""){
                    map.put(key, value);
                }
            });
            return JSON.stringify(map.data);
        },
        /**
         * 回写到页面
         * **/
        oKeyValueUtil.writePage=function (jsonStr){
            var jsonObj =JSON.parse(jsonStr);
            var keyIndex =oKeyValueUtil.paramIndex;
            for (var item in jsonObj){
                var id = oKeyValueUtil.bindDiv.attr('id');
                var divId =id+keyIndex.toString();
                var name = "key";
                var div = "<div style='float: left;margin-bottom: 5px' index ="+keyIndex+ " id=" +divId + ">";
                var key= "<input type='text' value='"+item+"' id=inputKey" + keyIndex + " style='border:1px solid #378888;font-size:20px' placeholder='" + name + "' name='keyvalueeditor-key'>&nbsp;&nbsp;"
                var value= "<input type='text' value='"+jsonObj[item]+"' id=inputValue" + keyIndex + " style='border:1px solid #378888;font-size:20px' placeholder='value' name='keyvalueeditor-key-Value'>&nbsp;&nbsp;"
                var d=   "<a type ='button'  onclick='deleteKeyDiv(" +divId + ")'><img src='/images/delete.png'></a>";
                var end="</div>";
                oKeyValueUtil.bindDiv.append(div+key+value+d+end);
                keyIndex += 1;
                oKeyValueUtil.paramIndex=keyIndex;
            }
        };
    return oKeyValueUtil;
};
deleteKeyDiv = function (id) {
    $(id).remove();
}
